<!--https://tailwindcomponents.com/component/login-page-glass-effect-and-background-image-->
<template>
  <div class="flex h-screen w-full items-center justify-center bg-gray-900 bg-cover bg-no-repeat"
       style="background-image:url('https://astar-huahua.oss-cn-shenzhen.aliyuncs.com/learn-bg/photo-1499123785106-343e69e68db1.avif')">
    <div class="rounded-xl bg-gray-800 bg-opacity-50 px-16 py-10 shadow-lg backdrop-blur-md max-sm:px-8">
      <div class="text-white">
        <div class="mb-8 flex flex-col items-center">
          <img src="https://www.logo.wine/a/logo/TikTok/TikTok-Logo.wine.svg" width="150" alt="" srcset=""/>
          <h1 class="mb-2 text-2xl">身份认证</h1>
          <span class="text-gray-300">请输入您的登录账号</span>
        </div>
        <div class="flex justify-center mb-4 text-lg">
          <input
            class="rounded-3xl border-none bg-yellow-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
            type="text" v-model="name" placeholder="id@email.com"/>
        </div>

        <div class="flex justify-center mb-4 text-lg">
          <input
            class="rounded-3xl border-none bg-yellow-400 bg-opacity-50 px-6 py-2 text-center text-inherit placeholder-slate-200 shadow-lg outline-none backdrop-blur-md"
            type="Password" v-model="password" placeholder="*********"/>
        </div>
        <div class="mt-8 flex justify-space-between text-lg text-black">
          <button @click="login"
                  class="rounded-3xl bg-yellow-400 bg-opacity-50 px-10 py-2 text-white shadow-xl backdrop-blur-md transition-colors duration-300 hover:bg-yellow-600">
            登录
          </button>
          <p @click="toRegister" class="pt-2 underline underline-offset-8 hover:text-white hover:cursor-pointer">注册</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import router from "@/router";

let name = ref(null);
let password = ref(null);

let login = () => {
  console.log("================================name ", name.value);
  console.log("================================password ", password.value);
}
let toRegister = () => {
  router.push({
    path: '/register',
  })
}


</script>

<style scoped>

</style>

